<template>
   <header class="bar bar-nav" >
    <a class="button button-link button-nav pull-left" v-link="{path: '/home', replace: false}">
    <span class="icon icon-left"></span>
    </a>
    <h1 class="title">近期新闻</h1>
  </header>
<div class="content">
 <ul >
  <li v-for="item in allnews">
   <a class="item-content item-link"  v-link="{path: '/news/newsinfo', query: {id: item.id, title: item.title}, replace: false}">
    <div class="card">
      <div class="card-content">
      <div class="card-content-inner color-white no-border no-padding"  valign="bottom" >
      {{item.title}}
       <img class='card-cover' v-bind:src='item.firstimgurl'>
       <p class="color-gray">发表于 {{item.datetime}}</p>
      </div>
    </div>
   </div>
   </a>
  </li>
 </ul>
</div>

</template>
<script>
import $ from 'zepto'
export default {
  route: {
    data () {
      this.$http.get(this.apiUrl)
      .then(function(response) {
        this.$set('allnews', response.json().news)
        $.hidePreloader()
      })
      $.showPreloader()
    }
  },
  ready () {
    $.init()
  },
  data () {
    return {
      apiUrl: 'http://creatgo.com/oec/news?method=news-phone',
      allnews: []
    }
  },
  computed: {
    length () {
      return this.tasks.length
    }
  }
}
</script>

<style scoped>
 ul{
   padding:0px;
 }
.card-header{
 text-align:center;
}
li{
  list-style:none;
}
.card{
 margin:0px;
}
img{
 width:100%;
}
.card-content-inner{
 color:black;
}
</style>
